<template>
  <!-- 学习进度 -->
  <view class="indexTeaching__header">
    <view class="header__title">
      <view class="header__tit">
        <view class="study_code">{{type === 'questions' ? courses[indexSub].courses_code : courses[indexSub].courses_code}}</view>
        <view>{{ type === 'questions' ? courses[indexSub].courses_name : courses[indexSub].courses_name}}</view>
      </view>
    </view>
    <view class="header__status">
      <view class="header__top">
        <slot name="top"></slot>
      </view>
      <view class="header__con">
        <view class="cmd-circle-l">
          <view class="cmd-circle-text">
            <slot name="left"></slot>
          </view>
        </view>
        <view class="cmd-circle-m">
          <view class="cmd-circle-text">
            <slot name="middle"></slot>
          </view>
        </view>
        <view class="cmd-circle-r">
          <view class="cmd-circle-text">
            <slot name="right"></slot>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * studyPlan 学习面板组件
 */
import uCircleProgress from "@/components/u-circle-progress/u-circle-progress";
import cmdProgress from "@/components/cmd-progress/cmd-progress.vue";
import { mapGetters } from "vuex";
export default {
  name: "studyPlan",
  components: {
    uCircleProgress,
    cmdProgress
  },
  props: {
    percent: {
      type: Number,
      default: 60
    },
    type: {
      type: String,
      default: "questions"
    }
  },
  computed: {
    ...mapGetters(["courses", "questionsSub", "indexSub"])
  },
  data() {
    return {
      index: -1
    };
  },
  mounted() {
    const { questionsSub, indexSub, type } = this;
    if (type === "questions") {
      this.index = questionsSub;
    } else {
      this.index = indexSub;
    }
  },
  methods: {}
};
</script>

<style lang="scss" scope>
.indexTeaching__header {
  .header__title {
    display: flex;
    flex-direction: row;
    .header__tit{
      display: flex;
      font-size: 32rpx;
      font-weight: bold;
      line-height: 78rpx;
      padding: 0rpx 30rpx;
      color: #fff;
      background: linear-gradient(-30deg, #36C0FF, #1A93FE);
      border-radius: 20rpx 40rpx 0rpx 0rpx;
      .study_code {
        margin-right: 20rpx;
      }
    }
  }
  .header__status {
    display: flex;
    flex-direction:column;
    font-size: 32rpx;
    background: #fff;
    .header__top{
      display: flex;
      flex-direction: row;
    }

    .header__con{
      display: flex;
      flex-direction: row;
      margin-bottom: 60rpx;

      .cmd-circle-l,
      .cmd-circle-m,
      .cmd-circle-r{
        flex: 1;
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>
